<template>
    <view class="wrap" @click="itemClick">
        <view class="tag">{{item.schemeTypeStr}}</view>
        <image class="cover" :src="item.modelUrl|mmvImageUrl"></image>
        <view class="content">
            <view class="title">{{item.brandName}}</view>
            <view class="desc">{{item.seriesName}} {{item.modelName}} {{filterNull(item.carModelRemark)}}</view>
            <view class="price" v-if="item.guidePrice">指导价 {{item.guidePrice}} 万/起</view>
            <view class="price" v-if="item.monthlyRent">月租金 {{item.monthlyRent}}/月起</view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'mmv-buy-basic',
    props: {
        bizType: {
            type: [String, Number],
        },
        item: {
            type: Object,
            default: function () {
                return {};
            },
        },
    },
    components: {},
    methods: {
        itemClick() {
            uni.navigateTo({
                url: '/pages/car/cardetail/cardetail?bizType=' + this.bizType + "&schemeId=" + this.item.schemeId
            });
        },
    },
}
</script>

<style lang="scss" scoped>
.wrap {
    width: 338upx;
    height: 392upx;
    background: #ffffff;
    border-radius: 16upx;
    margin-bottom: 30upx;
    position: relative;
}

.tag {
    position: absolute;
    top: 20upx;
    left: 0;
    background: linear-gradient(#fffcde 0%, #ffd291 100%);
    border-radius: 0px 8px 8px 0px;
    font-size: 20upx;
    font-weight: bold;
    color: #232323;
    padding: 9upx 12upx;
}

.cover {
    width: 338upx;
    height: 240upx;
    border-radius: 16upx 16upx 0 0;
    display: block;
}

.content {
    padding: 21upx 21upx;
}

.title {
    font-size: 28upx;
    font-weight: bold;
    text-align: left;
    color: #333333;
}

.desc {
    font-size: 18upx;
    color: #333;
    font-weight: bold;
    margin-bottom: 26upx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.price {
    font-size: 20upx;
    color: #ec4863;
    font-weight: bold;
}
</style>